
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body, ul, li {margin: 0; padding: 0; font-size: 14px;}
body {padding: 30px; background-color: #ccc;}
ul {margin: 5px 0 10px 0;}
ul li {list-style: none; display: block;}
li.classname { font-weight: bold; }
.csscode, pre {padding: 10px; border: 1px solid #999; display: block; background-color: #fff; width: 100%; font-size: 12px; line-height: 200%;}
li.classmark { font-size: 12px; margin: 5px; line-height: 160%; display: none;}

/*
一下代码由程序自动生成。
*/
.pic {background-image: url("CSS Satyr.png"); display: block;}
.pic_1 {background-position: -0px -0px; width: 50px; height: 50px; }
.pic_2 {background-position: -50px -0px; width: 50px; height: 50px; }
.pic_3 {background-position: -100px -0px; width: 50px; height: 50px; }
.pic_4 {background-position: -150px -0px; width: 50px; height: 50px; }
.pic_5 {background-position: -200px -0px; width: 50px; height: 50px; }
.pic_6 {background-position: -250px -0px; width: 50px; height: 50px; }
.pic_7 {background-position: -300px -0px; width: 50px; height: 50px; }
.pic_8 {background-position: -350px -0px; width: 50px; height: 50px; }
//-->
</style>
<title>CSS Satyr - http://shen.li/</title>
</head>
<body>
<h2>CSS Satyr</h2>
<ul>
<li>版本：1.2.0.0</li>
<li>作者：shen.li</li>
<li>主页：<a href="http://shen.li/blog/post/C_sharp/CSS_Satyr.html" target="_blank">http://shen.li/blog/post/C_sharp/CSS_Satyr.html</a></li>
<li>图片：<a href="CSS Satyr.png">F:\日常笔记-资料\angular\project\img\CSS Satyr.png</a></li>
</ul>

<h2>CSS 代码</h2>
<pre>
.shen_li {background-image: url("CSS Satyr.png"); display: block;}
.pic_1 {background-position: -0px -0px; width: 50px; height: 50px; }
.pic_2 {background-position: -50px -0px; width: 50px; height: 50px; }
.pic_3 {background-position: -100px -0px; width: 50px; height: 50px; }
.pic_4 {background-position: -150px -0px; width: 50px; height: 50px; }
.pic_5 {background-position: -200px -0px; width: 50px; height: 50px; }
.pic_6 {background-position: -250px -0px; width: 50px; height: 50px; }
.pic_7 {background-position: -300px -0px; width: 50px; height: 50px; }
.pic_8 {background-position: -350px -0px; width: 50px; height: 50px; }
</pre>

<h2>调用效果</h2>

<ul><li class="classname">cart.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_1"&gt; ... &lt;/span&gt;</div></li><li class="classmark">cart.png</li><li class="pic pic_1"></li></ul>
<ul><li class="classname">cart-a.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_2"&gt; ... &lt;/span&gt;</div></li><li class="classmark">cart-a.png</li><li class="pic pic_2"></li></ul>
<ul><li class="classname">cate.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_3"&gt; ... &lt;/span&gt;</div></li><li class="classmark">cate.png</li><li class="pic pic_3"></li></ul>
<ul><li class="classname">cate-a.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_4"&gt; ... &lt;/span&gt;</div></li><li class="classmark">cate-a.png</li><li class="pic pic_4"></li></ul>
<ul><li class="classname">home.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_5"&gt; ... &lt;/span&gt;</div></li><li class="classmark">home.png</li><li class="pic pic_5"></li></ul>
<ul><li class="classname">home-a.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_6"&gt; ... &lt;/span&gt;</div></li><li class="classmark">home-a.png</li><li class="pic pic_6"></li></ul>
<ul><li class="classname">mine.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_7"&gt; ... &lt;/span&gt;</div></li><li class="classmark">mine.png</li><li class="pic pic_7"></li></ul>
<ul><li class="classname">mine-a.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_8"&gt; ... &lt;/span&gt;</div></li><li class="classmark">mine-a.png</li><li class="pic pic_8"></li></ul>
</body>
</html>
				